import React from 'react';
import { Avatar, Badge } from 'antd-mobile';
import { BellOutline, UserOutline, SearchOutline } from 'antd-mobile-icons';
import './Header.scss';

interface HeaderProps {
  onSearchClick?: () => void;
}

const Header: React.FC<HeaderProps> = ({ onSearchClick }) => {
  const handleSearchClick = () => {
    onSearchClick?.();
  };

  return (
    <div className="header">
      <div className="header-top">
        <div className="time">12:00</div>
        <div className="status-icons">
          <span className="signal">📶</span>
          <span className="wifi">📶</span>
          <span className="battery">🔋</span>
        </div>
      </div>
      
      <div className="header-main">
        <div className="avatar-section">
          <Avatar
            src=""
            style={{ '--size': '40px' }}
            className="user-avatar"
            fallback={<UserOutline />}
          />
        </div>
        
        <div className="search-section">
          <div className="search-bar-wrapper" onClick={handleSearchClick}>
            <div className="search-bar">
              <SearchOutline className="search-icon" />
              <span className="search-placeholder">请输入症状/疾病</span>
            </div>
          </div>
        </div>
        
        <div className="notification-section">
          <Badge content="99+" className="notification-badge">
            <BellOutline className="notification-icon" />
          </Badge>
        </div>
      </div>
    </div>
  );
};

export default Header;
